<template>
  <div class="profile-container">
    <!-- 基本信息卡片 -->
    <el-card class="profile-card">
      <div class="user-info">
        <el-avatar :size="80" :src="userInfo.avatar"></el-avatar>
        <div class="info-details">
          <h2>{{ userInfo.username }}</h2>
          <p>{{ userInfo.email }}</p>
          <p>学校：{{ userInfo.school }}</p>
        </div>
      </div>
    </el-card>

    <!-- 学习统计 -->
    <el-card class="stats-card">
      <div class="stats-grid">
        <div class="stat-item">
          <h3>{{ learningStats.totalCourses }}</h3>
          <p>学习课程</p>
        </div>
        <div class="stat-item">
          <h3>{{ learningStats.completedCourses }}</h3>
          <p>完成课程</p>
        </div>
        <div class="stat-item">
          <h3>{{ learningStats.totalExams }}</h3>
          <p>参与考试</p>
        </div>
        <div class="stat-item">
          <h3>{{ learningStats.avgScore }}分</h3>
          <p>平均分数</p>
        </div>
      </div>
    </el-card>

    <!-- 最近学习 -->
    <el-card class="recent-card">
      <div slot="header">
        <span>最近学习</span>
      </div>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in recentActivities"
          :key="index"
          :timestamp="activity.time">
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'UserProfile',
  
  data() {
    return {
      learningStats: {
        totalCourses: 0,
        completedCourses: 0,
        totalExams: 0,
        avgScore: 0
      },
      recentActivities: []
    }
  },

  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },

  created() {
    this.fetchUserStats()
    this.fetchRecentActivities()
  },

  methods: {
    async fetchUserStats() {
      try {
        // 这里替换为实际的API调用
        const response = await this.$api.user.getUserStats()
        this.learningStats = response.data
      } catch (error) {
        this.$message.error('获取学习统计失败')
      }
    },

    async fetchRecentActivities() {
      try {
        // 这里替换为实际的API调用
        const response = await this.$api.user.getRecentActivities()
        this.recentActivities = response.data
      } catch (error) {
        this.$message.error('获取最近活动失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.profile-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;

  .profile-card {
    margin-bottom: 20px;
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 20px;

      .info-details {
        h2 {
          margin: 0 0 10px;
        }
        p {
          margin: 5px 0;
          color: #666;
        }
      }
    }
  }

  .stats-card {
    margin-bottom: 20px;

    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      text-align: center;

      .stat-item {
        h3 {
          font-size: 24px;
          color: #409EFF;
          margin: 0;
        }
        p {
          margin: 5px 0;
          color: #666;
        }
      }
    }
  }

  .recent-card {
    .el-timeline {
      padding: 20px;
    }
  }
}

@media (max-width: 768px) {
  .profile-container {
    .stats-card .stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
</style> 